<template>
  <div class="paycode">
    <h2>当面付二维码</h2>
    <!-- <div class="pay-address">{{ payAddress }}</div> -->
    <canvas ref="qrcodeCanvas" :width="canvasSize" :height="canvasSize"></canvas>
    {{ outTradeNo }},{{ totalAmount }},{{subject  }}
  </div>
</template>

<script>
import qrcode from 'qrcode'
import { getQrcode } from '@/api/alipay'
export default {
  name: 'HotelSystemAdminCc',
  props: ['outTradeNo', 'totalAmount', 'subject'],
  data () {
    return {
      // payAddress: '',

      canvasSize: 256
    }
  },
  created () {

  },
  async mounted () {
    this.initQRcode()
  },

  methods: {
    async initQRcode () {
    // 注意先加载数据 最后再往canvas中写
      const { data: res } = await getQrcode({})
      this.payAddress = res.data.qr_code
      // 使用 qrcode 生成二维码图片
      qrcode.toCanvas(this.$refs.qrcodeCanvas, this.payAddress, {
        width: this.canvasSize,
        height: this.canvasSize
      })
    }
  }
}
</script>

<style lang="less" scoped>
.paycode {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.pay-address {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
</style>
